<template>
  <div style="padding: 10px">
    <div style="display: flex; align-items: center; justify-content: space-between">
      <div> </div>
      <div>
        <el-input
          style="width: 260px"
          v-model="input2"
          class="w-50 m-2"
          placeholder="请搜索菜单名称"
        />
        <a-button type="primary"> 搜索 </a-button>
      </div>
    </div>
    <div class="header">
      <div>权限管理</div>

      <div><a-button type="primary" @click="addMenu"> 新增菜单 </a-button></div> </div
    ><el-table
      :data="tableData"
      style="width: 100%"
      stripe
      border
      row-key="id"
      header-align="center"
      :header-row-style="headerRowStyle"
      :row-style="rowState"
    >
      <el-table-column prop="id" label="id" />
      <el-table-column prop="name" label="菜单名称" />
      <el-table-column prop="title" label="权限名称" />
      <el-table-column prop="path" label="路径" />
      <el-table-column prop="redirect" label="重定向" />
      <el-table-column prop="hidden" label="排序" />
      <el-table-column prop="status" label="状态" />
      <el-table-column width="180" prop="ctime" label="创建时间" sortable />
      <el-table-column fixed="right" label="Operations" width="120">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="menuEdit(scope)">编辑</el-button>
          <el-button link type="danger" size="small" @click="menuDel(scope)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <BasicDrawer
      v-bind="$attrs"
      @register="register"
      @close="Close"
      title="新增菜单"
      @ok="shot"
      :loading="DrawerData.loading"
      :isDetail="true"
      width="100%"
      :showFooter="true"
    >
      <MenusAdd :data="menuData" :select="select" :list="list"
    /></BasicDrawer>
  </div>
</template>

<script lang="ts" setup>
  import { onBeforeMount, ref } from 'vue';
  import { BasicDrawer, useDrawer } from '/@/components/Drawer';
  import { menusStore } from '../index';
  import { ElMessage } from 'element-plus';
  import MenusAdd from './add.vue';

  {
    MenusAdd;
  }
  const [register, { openDrawer, closeDrawer }] = useDrawer();
  const input2 = ref();
  const list: any = ref();
  const select = ref('创建菜单');
  const rowState = (arg) => {
    return {
      backgroundColor: '#fff',
      color: '#000',
      height: '40px',
    };
  };
  const menuData = ref();
  function Close(e) {
    closeDrawer();
  }
  function addMenu() {
    select.value = '创建菜单';
    openDrawer(true);
  }
  async function menuEdit(item) {
    select.value = '编辑菜单';
    menuData.value = item.row;
    openDrawer(true);
  }
  async function menuDel(item) {
    const result = await menusStore.DelMenus({ id: item.row.id });

    if (result.code == 200) {
      getMenus();
    }
  }
  function shot(record: Recordable) {
    // openDrawer(false, data);
    console.log(record);
  }
  const headerRowStyle = (args) => {
    return {
      height: '50px',
      backgroundColor: '#f4f4f4',
      color: '#000',
    };
  };
  const DrawerData = ref({
    loading: false,
  });
  const tableData: any = ref();
  onBeforeMount(() => {
    getMenus();
  });

  async function getMenus() {
    const result = await menusStore.GetMenusList({});
    if (result.code == 200) {
      tableData.value = result.data;
      list.value = tableData.value.filter((item) => {
        var list1 = {
          label: item.name,
          value: item.id,
        };

        return list1;
      });
    } else {
      ElMessage(result.message);
    }
    console.log(result);
  }
</script>
<style>
  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40px;

    /* padding: 10px; */
    widows: 100%;
  }
</style>
